<template>
  <div class="my_bgbox">
    <Header />
    <div class="rdMService">
      <img src="../../assets/image/banner.png" alt class="servier_img" />
      <div class="rdService_item">
        <p class="title">法拍房市场优势</p>
        <p class="text">帮您省钱的不二选择</p>
        <div class="goodness">
          <div class="goodness_item goodness1">
            <img src="../../assets/img/jgd.png" alt />
            <p class="goodness_title">价格低</p>
            <p class="goodness_text">相当于市场价7折</p>
          </div>
          <div class="goodness_item goodness2">
            <img src="../../assets/img/zyg_2.png" alt />
            <p class="goodness_title">自由购</p>
            <p class="goodness_text">无需本地户籍及社保</p>
          </div>
          <div class="goodness_item goodness3">
            <img src="../../assets/img/ktz.png" alt />
            <p class="goodness_title">可投资</p>
            <p class="goodness_text">自由购低于市场价</p>
          </div>
          <div class="goodness_item goodness4">
            <img src="../../assets/img/cspt.png" alt />
            <p class="goodness_title">成熟配套</p>
            <p class="goodness_text">优越的地理条件</p>
          </div>
        </div>
      </div>
      <div class="rdService_item1">
        <p class="title">我们可以为您做什么</p>
        <p class="text">为您提供从选房到过户的高品质购房体验</p>
        <div class="team_box">
          <div class="team_tt">
            <img src="../../assets/img/tt.png" alt class="servier_img" />
          </div>
          <div class="team_text">
            <p>
              <img src="../../assets/img/spot.png" alt />
              确保房源信息完整性、尽调报告及时性、杜绝购房隐患
            </p>
            <p>
              <img src="../../assets/img/spot.png" alt />减少东奔西跑、看户型的时间浪费、科学把控交房时间
            </p>
            <p>
              <img src="../../assets/img/spot.png" alt />1+N团队服务、专业的人做专业的事、更省心
            </p>
            <p>
              <img src="../../assets/img/spot.png" alt />参拍、贷款、过户、交房一站式服务，省心、省时、省钱
            </p>
          </div>
        </div>
      </div>
      <div class="rdService_item" v-if="purchList">
        <p class="title">自由购</p>
        <p class="text">不受限制，实现购房自由</p>
        <List :title="'自由购'" :list="purchList" />
      </div>
      <div class="rdService_item" v-if="purchListTwo">
        <p class="title">刚需捡漏</p>
        <p class="text">省钱是常态</p>
        <List :title="'刚需捡漏'" :list="purchListTwo" />
      </div>
      <div class="rdService_item2">
        <p class="title">专家帮选 6 大服务内容</p>
        <p class="text">不推销，全面解读，从您的需求出发</p>
        <div class="service">
          <div v-for="(item,index) in conterList" :key="index" class="service_item">
            <img :src="item.img" alt class="service_item_img" />
            <p class="service_item_text">{{item.text}}</p>
          </div>
        </div>
      </div>
      <div class="rdService_item rdService_img">
        <p class="title">瑞鼎法拍9大服务保障</p>
        <p class="text">大机构，保证您的购房无需承担任何风险</p>
        <img src="../../assets/image/9dbz.png" alt class="servier_img" />
      </div>
      <div class="rdService_item1 rdService_img">
        <p class="title">瑞鼎法拍经理</p>
        <p class="text">高素质、严要求、更专业</p>
        <!-- <img src="../../assets/img/btx.png" alt="" /> -->
        <div class="broker_tema">
          <img src="../../assets/image/fpjl_1.png" alt class="broker_img" />
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>
<script>
import rem from "@/assets/js/rem.js";
import Header from "@/components/m_file/header.vue";
import Footer from "@/components/m_file/footer.vue";
import List from "@/components/m_file/list.vue";
export default {
  data() {
    return {
      purchList: [],
      purchListTwo: [],
      conterList: [
        {
          text: "政策解读",
          img: require(`@/assets/image/zc_2.png`)
        },
        {
          text: "楼盘分析",
          img: require(`@/assets/image/flpfx.png`)
        },
        {
          text: "楼盘背调",
          img: require(`@/assets/image/flpbd.png`)
        },
        {
          text: "房源匹配",
          img: require(`@/assets/image/ffypp.png`)
        },
        {
          text: "楼盘对比",
          img: require(`@/assets/image/flpdb.png`)
        },
        {
          text: "拍卖过户",
          img: require(`@/assets/image/fpmgh.png`)
        }
      ]
    };
  },
  mounted() {
    this.OnFreedomBuy();
    this.OnCheapbyHouse();
  },
  methods: {
    onDetails(item) {
      this.$router.push({ name: "Details", query: { id: item } });
    },
    On53() {
      window.location.href =
        "https://tb.53kf.com/code/client/9a12bb00652ff2c013fe004ae3947f845/1";
      this.stopBubbling(event);
    },
    Onfollow(val, idx) {
      this.stopBubbling(event);
      if (val.ynFollow == 0) {
        this.$message({
          message: "请先登录",
          type: "warning"
        });
      } else if (val == 1) {
        this.instance
          .cancelHouseFollow({
            id: val.id
          })
          .then(res => {
            if (res.data.code == "0") {
              this.OnFreedomBuy();
              this.OnCheapbyHouse();
            }
          })
          .catch(function(error) { });
      } else {
        this.instance
          .addHouseFollow({
            houseId: val.id
          })
          .then(res => {
            if (res.data.code == "0") {
              this.OnFreedomBuy();
              this.OnCheapbyHouse();
            }
          })
          .catch(function(error) { });
      }
    },
    OnFreedomBuy() {
      this.instance
        .FreedomBuy({
          page: 1,
          limit: 3
        })
        .then(res => {
          console.log(res);
          this.purchList = res.data.data;
          this.purchList.forEach(item => {
            if (item.imgUrl) {
              item.img = item.imgUrl.split(",");
            }
          });
        })
        .catch(function(error) { });
    },
    OnCheapbyHouse() {
      this.instance
        .CheapbyHouse({
          page: 1,
          limit: 3
        })
        .then(res => {
          console.log(res);
          this.purchListTwo = res.data.data;
          this.purchListTwo.forEach(item => {
            item.img = item.imgUrl.split(",");
          });
        })
        .catch(function(error) { });
    }
  },
  components: {
    Header,
    Footer,
    List
  }
};
</script>
<style lang="less" scoped>
.broker_img {
  width: 80%;
  margin: 0 auto;
  padding-top: 0.3rem;
}
.servier_img {
  width: 100%;
}
.rdMService {
  font-size: 0;
  .title {
    text-align: center;
    font-size: 0.18rem;
    font-weight: bold;
    color: #333333;
  }
  .text {
    text-align: center;
    font-size: 0.12rem;
    color: #999999;
    margin-bottom: 0.2rem;
  }
  .rdService_img {
    text-align: center;
  }
  .rdService_item {
    margin: 0.3rem 0;
    .goodness {
      overflow: hidden;
      .goodness1 {
        border-top: 4px solid #f5643e;
      }
      .goodness2 {
        border-top: 4px solid #008afb;
      }
      .goodness3 {
        border-top: 4px solid #e21e2d;
      }
      .goodness4 {
        border-top: 4px solid #ffc954;
      }
      .goodness_item {
        width: 44%;
        float: left;
        text-align: center;
        padding: 0.12rem 0;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.07);
        border-radius: 10px;
        margin: 0.1rem;
        img {
          width: 0.56rem;
          height: 0.56rem;
        }

        .goodness_title {
          font-size: 0.1rem;
          line-height: 0.2rem;
          font-weight: bold;
          color: #333333;
          margin-top: 0.09rem;
        }
        .goodness_text {
          font-size: 0.12rem;
          color: #666666;
        }
      }
    }
    .team_box {
      .tab {
        padding: 40px 0;
        // display: flex;
        .tab_detalis:last-child {
          margin-right: 0px;
        }
        .tab_list:last-child {
          margin-right: 0px;
        }
        .tab_list {
          width: 33.33%;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 16px;
          margin-right: 30px;
        }
        .tab_detalis {
          margin-right: 30px;
          width: 276px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 16px;
        }
        img {
          width: 100%;
          height: 214px;
          border-radius: 6px;
          position: relative;
        }
        .address {
          width: 300px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin: 34px 0 11px 0;
          font-weight: bold;
          color: #333;
        }
        .details {
          color: #656565;
        }
        .price {
          color: #656967;
          margin: 20px 0 19px 0;
        }
        .startPrice {
          overflow: hidden;
          .start {
            float: left;
            font-weight: bold;
            color: #333;
            margin: 0;
            span {
              color: #d91515;
            }
          }
          .btn {
            float: right;
            width: 20px;
            height: 20px;
          }
        }
      }
      .picture {
        position: relative;
        text-align: center;
        // .rebate {
        //   width: 38px;
        //   height: 43px;
        //   //   background: url("~@/assets/img/zk.png") no-repeat;
        //   position: absolute;
        //   top: -5px;
        //   right: 20px;
        //   line-height: 43px;

        //   font-size: 12px;
        //   color: #fff;
        // }
        .heart {
          position: absolute;
          right: 20px;
          top: 20px;
          width: 20px;
          height: 20px;
        }
        .soon {
          position: absolute;
          top: 0;
          width: 89px;
          height: 31px;
          background: linear-gradient(0deg, #19aa6b, #3cd6a2, #3cd8a4);
          border-radius: 6px 0px 6px 0px;
          line-height: 31px;
          color: #fff;
          font-size: 14px;
        }
        .soonGreen {
          background: linear-gradient(0deg, #19aa6b, #3cd6a2, #3cd8a4);
        }
        .soonRed {
          background: #d91615;
        }
        .time {
          position: absolute;
          top: 200px;
          left: 25px;
          width: 226px;
          height: 33px;
          background: #ffffff;
          box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.05);
          border-radius: 17px;
          font-size: 14px;
          line-height: 33px;
        }
        .camera {
          position: absolute;
          right: 15px;
          top: 160px;
          text-align: right;
          .start {
            font-size: 12px;
            color: #fff;
          }
          .hour {
            color: #fa6c5b;
            font-size: 16px;
          }
        }
      }
    }
  }
  .rdService_item1 {
    background: #f5f8fa;
    padding: 0.3rem 0;
    .team_box {
      //   width: 1200px;
      //   margin: 0 auto;
      //   display: flex;
      padding: 0rem 0.15rem 0 0.15rem;
      .team_right {
        margin-left: 0.45rem;
      }
      .team_text {
        // margin: 0 160px 0 43px;
        font-size: 0.12rem;
        color: #333333;
        line-height: 0.3rem;
        text-align: left;
        img {
          margin-right: 20px;
        }
      }
    }
  }
  .service {
    margin: 0.1rem 0;
    overflow: hidden;
    .service_item {
      float: left;
      text-align: center;
      width: 50%;
      .service_item_img {
        width: 0.8rem;
        height: 0.8rem;
      }
      .service_item_text {
        font-size: 0.15rem;
        color: #333333;
      }
    }
  }
  .rdService_item2 {
    padding: 0.3rem 0;
    text-align: center;
    background: url('~@/assets/image/fwbg.png') no-repeat;
    background-size: 100% 100%;
  }
}
</style>
